<html ng-app="exampleApp">
<head>
    <title>Directives</title>
    <script src="angular.js"></script>
    <script>
        angular.module("exampleApp", [])
            .directive("demoDirective", function () {
                return function (scope, element, attrs) {
                    var listElem = angular.element("<ol>");
                    element.append(listElem);
                    for (var i = 0; i < scope.names.length; i++) {
                        listElem.append(angular.element("<li>")
                            .append(angular.element("<span>").text(scope.names[i])));
                    }
                }
            })

        .controller("defaultCtrl", function ($scope) {
            $scope.names = ["Apples", "Bananas", "Oranges"];
        })              
    </script>
</head>
<body ng-controller="defaultCtrl">
    <h3>Fruit</h3>
    <div demo-directive></div>
</body>
</html>
